<template>
  <div>
    <h1>员工权限管理</h1>
    <div style="margin-bottom: 16px" >
      <a-input-search v-model=sid placeholder="input search text" style="width:300px" @search="onSearch(sid)">
      <a-button slot="enterButton">
        搜索
      </a-button>
    </a-input-search>
      <div>
          <a-modal v-model="visible" :title="curdata.linkman" @ok="handleOk">
              <p>{{curdata}}</p>
          </a-modal>
          
      </div>
      <div>
          <a-modal v-model="visible1"  @ok="handleOk">
              <p>{{seadata}}</p>
          </a-modal>
      </div>

       <div>
           <a-modal
        v-model="modal3Visible"
        title="修改用户信息"
        centered
        @ok="handleOk(editData.number)"
      >
        <div>
          <p>姓名:<input type="text" ref="name" :value="editData.name" style="margin-left:45px;width: 180px;"></p>
          <p>员工号:<input type="text" ref="ID" :value="editData.ID" style="margin-left:30px;width: 180px;"></p>
          <p>部门:<input type="text" ref="department" :value="editData.department" style="margin-left:45px;width: 180px;"></p>
          <p>角色:<input type="text" ref="role" :value="editData.role" style="margin-left:45px;width: 180px;"></p>
          <p>岗位:<input type="text" ref="post" :value="editData.post" style="margin-left:45px;width: 180px;"></p>
          <p>负责区域:<input type="text" ref="territory" :value="editData.territory" style="margin-left:16px;width: 180px;"></p>
        </div>
      </a-modal>
      </div>



      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
        重选
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `选择 ${selectedRowKeys.length} 条数据` }}
        </template>
      </span>
    </div>


      <div id="components-modal-demo-position">
      <a-button type="primary"  @click="() => (modal2Visible = true)">
        增加
      </a-button>
      
      <a-modal
        v-model="modal2Visible"
        title="添加用户信息"
        centered
        @ok="adddata"
      >
        <div>
          <p>姓名:<input type="text" v-model="name" style="margin-left:45px;width: 180px;"></p>
          <p>员工号:<input type="text" v-model="id" style="margin-left:30px;width: 180px;"></p>
          <p>部门:<input type="text" v-model="department" style="margin-left:45px;width: 180px;"></p>
          <p>角色:<input type="text" v-model="role" style="margin-left:45px;width: 180px;"></p>
          <p>岗位:<input type="text" v-model="post" style="margin-left:45px;width: 180px;"></p>
          <p>负责区域:<input type="text" v-model="territory" style="margin-left:16px;width: 180px;"></p>
        </div>
      </a-modal>
    </div>     
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="showData"
    >
    <a slot="action" slot-scope="record" @click="showModal(record.ID)">审批</a>
    <a slot="actionOne" slot-scope="record" @click="deleteIt(record.ID)">删除</a>
    <a slot="actionTwo" slot-scope="record" type="primary" @click="edit(record.ID)">修改</a>
    </a-table>
    
  </div>
  
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'number',
  },
  {
    title: '状态',
    dataIndex: 'state',
  },
  {
    title: '账号',
    dataIndex: 'ID',
  },
  {
    title: '员工姓名',
    dataIndex: 'name',
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
  },
  {
    title: '角色',
    dataIndex: 'role',
  },
  {
    title: '岗位',
    dataIndex: 'post',
  },
  {
    title: '所属部门',
    dataIndex: 'department',
  },
  {
    title: '创建时间',
    dataIndex: 'setdate',
  },
  {
    title: '主管领导',
    dataIndex: 'lead',
  },
  {
    title: '岗位描述',
    dataIndex: 'description',
  },
  {
    title: '负责区域',
    dataIndex: 'territory',
  },
  {
    title: '',
    key: 'operation',
    fixed: 'right',
    scopedSlots: { customRender: 'action' },
    modal2Visible: false,
  },
  {
    title: '',
    key: 'operation-One',
    fixed: 'right',
    scopedSlots: { customRender: 'actionOne' },
    modal2Visible: false,
    visible: false,
  },
   {
    title: '',
    key: 'operation-Two',
    fixed: 'right',
    scopedSlots: { customRender: 'actionTwo' },
    modal3Visible: false,
    
  },
];


export default {
  data () {
    return {
      showData: [
        {
          number:"1",
          state: "未审核",
          ID: 12345,
          name: "张三",
          phone:"1257996",
          role:"操作员",
          post:"组长",
          department:"后勤",
          setdate:"2020-12-30",
          lead:"llll",
          description:"无",
          territory:"后勤"
        },
        {
          number:"2",
          state: "未审核",
          ID: 123456445,
          name: "李四",
          phone:"1257996",
          role:"操作员",
          post:"组长",
          department:"后勤",
          setdate:"2020-12-30",
          lead:"llll",
          description:"无",
          territory:"后勤"
        },
        {
          number:"3",
          state: "未审核",
          ID: 125464,
          name: "王五",
          phone:"1257996",
          role:"操作员",
          post:"组长",
          department:"后勤",
          setdate:"2020-12-30",
          lead:"llll",
          description:"无",
          territory:"后勤"
        },
        {
          number:"4",
          state: "未审核",
          ID: 1828124061,
          name: "lllbj"
        }
        ],
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      visible: false,
      visible1: false,
      editData: {},
      // visible2: false,
      curdata:'',
      seadata:'',
      // eddata:'',
      modal2Visible: false,
      modal3Visible: false,
      index: 5,
      
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible;
      console.log(modal1Visible);
    },
    adddata(){
      this.showData.push({
          number: this.index++,
          state: "未审核",
          lead:"llll",
          description:"无",
          name: this.name,
          id: this.id,
          department:this.department,
          role:this.role,
          post:this.post,
          territory:this.territory,
      });
      this.modal2Visible = false;
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    showModal(curID) {
      this.visible = true;
      let curData = this.showData.filter((item) => item.ID === curID)[0];
      this.curdata = curData;
    },
    handleOk(index) {
      this.visible = false;
      this.visible1=false;
      this.visible2=false;
      this.editIt(this.curdata.ID);
      for(let i = 0; i < this.showData.length; i++) {
        if (this.showData[i].number == index) {
          this.editData.name = this.$refs.name.value
          this.editData.ID = this.$refs.ID.value
          this.editData.department = this.$refs.department.value
          this.editData.role = this.$refs.role.value
          this.editData.post = this.$refs.post.value
          this.editData.territory = this.$refs.territory.value
          this.showData[i] == this.editData
        }
      }
      this.modal3Visible = false;
    },
    onSearch(sid) {
      this.visible1 = true;
      let seaData = this.showData.filter((item) => item.ID == sid)[0];
      this.seadata = seaData;
    },
    editIt(id) {
        for(let i=0;i<this.showData.length;i++) {
          if(this.showData[i].ID === id) {
              this.showData[i].state = "已审核";
          }
      }
    },
    deleteIt(id) {
      this.showData = this.showData.filter((item) => item.ID !== id)
    },
    test () {
      this.showData.forEach((item,index) => {
        item.number = index
      })
    },
    edit(index) {
      for(let i=0;i<this.showData.length;i++) {
          if(this.showData[i].ID === index) {
              this.editData = this.showData[i]
          }
      }
      this.modal3Visible = true;
    },
  },
  

}
</script>

